<template>
  <el-card>
    <el-tabs
      v-model="current"
      @tab-click="handleClick">
      <el-tab-pane
        v-for="(tab, index) in tabMapOptions"
        :key="tab.key"
        :name="tab.key"
        :label="tab.label">
        <keep-alive>
          <component :is="currentComponent[index]" />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import user from './pages/user'
import page from './pages/page'
import content from './pages/content'
import remain from './pages/remain'
import action from './pages/action'

export default {
  name: 'Tab',
  components: { user, page, content, remain, action },
  data () {
    return {
      tabMapOptions: this.initTabMapOptions(),
      current: 'name-0',
      createdTimes: 0,
      currentComponent: [user, page, content, remain, action]
    }
  },
  watch: {
    activeName (val) {
      this.$router.push(`${this.$route.path}?tab=${val}`)
    }
  },
  created () {
    // init the default  selected tab
    const tab = this.$route.query.tab
    if (tab) {
      this.activeName = tab
    }
  },
  methods: {
    initTabMapOptions () {
      const tabs = []
      this.$i18n.t('appData.user.tabs').map(tab => {
        tabs.push({ label: tab })
      })
      const buffer = []
      tabs.forEach((item, index) => {
        const _item = Object.assign({}, item, { key: `name-${index}` })
        buffer.push(_item)
      })
      return buffer
    },
    showCreatedTimes () {
      this.createdTimes = this.createdTimes + 1
    },
    handleClick (tab, event) {
      // this.current = tab.name
    }
  }
}
</script>

<style scoped>
  .tab-container {
    padding: 30px;
    background-color: rgb(240, 242, 245);
  }
</style>
